<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="stylesheet" href="{{ asset('css/font.css') }}">
    <link rel="stylesheet" href="{{ asset('css/xadmin.css') }}">
    <script type="text/javascript" src="{{ asset('lib/layui/layui.js') }}" charset="utf-8"></script>
    <script type="text/javascript" src="{{ asset('js/xadmin.js') }}"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #subitem+div {
            width: 500px !important;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                {{ csrf_field() }}
                <input type="hidden" name="user_id" value="{{ Auth::user()->id ?? '' }}">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属周期</label>
                    <div class="layui-input-inline">
                        <select name="period_id" lay-filter="period_id" id="period_id">
                            <option value="">请周期</option>
                            @php
                                $i = 0;
                            @endphp
                            @foreach ($periods as $id => $name)
                                <option value="{{ $id }}" @if ($i++ == 0) selected @endif>
                                    {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">宿舍楼</label>
                    <div class="layui-input-inline">
                        <select name="building" lay-filter="building" id="building">
                            <option value="">请选择宿舍楼</option>
                            @foreach ($buildings as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <label class="layui-form-label"><span class="x-red">*</span>宿舍</label>
                    <div class="layui-input-inline">
                        <select name="dorm_id" id="dorm" lay-filter="dorm" lay-verify="required">
                            <option value="">请先选择宿舍楼</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">评比类别</label>
                    <div class="layui-input-inline">
                        <select name="category" lay-filter="category" id="category">
                            <option value="">请选择评比类别</option>
                            @foreach ($categories as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="x-red">*</span>评比项</label>
                    <div class="layui-input-inline">
                        <select name="subitem_id" id="subitem" lay-filter="subitem" lay-verify="required">
                            <option value="">请先选择评比项</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="score" class="layui-form-label"><span class="x-red">*</span>得分</label>
                    <div class="layui-input-inline">
                        <input type="number" name="score" id="score" lay-verify="number,required"
                            placeholder="请输入得分" class="layui-input">
                    </div>
                    <label for="rating_date" class="layui-form-label">
                        <span class="x-red">*</span>评分日期
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="rating_date" name="rating_date" required="" lay-verify="required"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="remark" class="layui-form-label">备注
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="remark" name="remark" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                    </label>
                    <button class="layui-btn" lay-filter="add" lay-submit="">
                        添加
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer', 'laydate'], function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            laydate = layui.laydate;
            laydate.render({
                elem: '#rating_date',
                value: new Date().toISOString().substr(0, 10)
            });
            // 替换静态数据部分
            form.on('select(building)', function(data) {
                var building_id = data.value;
                var dormSelect = $('#dorm');

                dormSelect.empty();

                if (building_id === '') {
                    dormSelect.append('<option value="">请先选择宿舍楼</option>');
                } else {
                    // 发起AJAX请求获取宿舍数据
                    $.ajax({
                        url: '/api/getDormsByBuilding',
                        type: 'GET',
                        data: {
                            building_id: building_id
                        },
                        success: function(res) {
                            dormSelect.append('<option value="">请选择宿舍</option>');
                            $.each(res, function(index, dorm) {
                                dormSelect.append('<option value="' + dorm.id + '">' +
                                    dorm.code + '</option>');
                            });
                            form.render('select');
                        }
                    });
                }
            });

            // 替换静态数据部分
            form.on('select(category)', function(data) {
                var category_id = data.value;
                var subItemSelect = $('#subitem');

                subItemSelect.empty();

                if (category_id === '') {
                    subItemSelect.append('<option value="">请先选择宿舍楼</option>');
                } else {
                    // 发起AJAX请求获取宿舍数据
                    $.ajax({
                        url: '/api/getSubitemsByCategory',
                        type: 'GET',
                        data: {
                            category_id: category_id
                        },
                        success: function(res) {
                            subItemSelect.append('<option value="">请选择评分项</option>');
                            $.each(res, function(index, subitem) {
                                subItemSelect.append('<option value="' + subitem.id +
                                    '">' +
                                    subitem.subitem_name + '[' + subitem
                                    .subitem_score + '分]</option>');
                            });
                            form.render('select');
                        }
                    });
                }
            });

            //监听提交
            form.on('submit(add)',
                function(data) {
                    console.log(data.field);
                    //发异步删除数据
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-Token': $('input[name="_token"]').val()
                        }
                    });
                    let url = '/dormitory-ratings';
                    $.ajax({
                        url: url,
                        data: data.field,
                        type: 'POST',
                        dataType: "json",
                        success: function() {
                            console.log('success')
                            layer.alert('添加成功', {
                                icon: 6,
                                time: 5000
                            }, function() {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口数据表进行刷新
                                parent.layui.table.reload('data-table');
                            });
                        },
                        error: function(err) {
                            console.log(err);
                            layer.msg('保存失败', {
                                icon: 2,
                                time: 1000
                            });

                        }
                    });
                    //ajax 异步调用会发生再这个语句之后，返回false可以避免异步返回时页面发生了刷新
                    return false;
                });
        });
    </script>
</body>

</html>
